<!DOCTYPE html>
<html lang="en">

<head>
	<title>榜样</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
	<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">
	<script src="js/jquery-1.6.3.min.js" type="text/javascript"></script>
	<script src="js/cufon-yui.js" type="text/javascript"></script>
	<script src="js/cufon-replace.js" type="text/javascript"></script>
	<script src="js/FF-cash.js" type="text/javascript"></script>
	<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
	<script src="js/tms-0.3.js" type="text/javascript"></script>
	<script src="js/tms_presets.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(function () {
			$('.close').bind('click', function () {
				$(this).parent().show().fadeOut(500);
			});
		}); 
	</script>
	<style>
		.zuogelie {
			display: flex;
			margin: 10px;

		}

		.zz {
			margin: 0 0.01em auto;
			font-size: 1.25em;
			line-height: 1.428em;
			background-color: #eeeef2;
			padding: 1em 2em;
			border-radius: 1.75em;
			box-shadow: 0em 0.3em 0.3em 0.3em #888888;
		}

		.zz1 {
			margin: 0 0.01em auto;
			font-size: 1.25em;
			line-height: 1.428em;
			background-color: #dddde7cc;
			padding: 1em 2em;
			border-radius: 1.75em;
		}

		.box {
			width: 2000spx
		}

		.ct {
			width: 100%;
			padding: 25px 0 25px;
			background: url(../images/content-bg.jpg) center -196px repeat-y #f4f5f7;
		}

		.divname {
			font-size: 1.5em;
		}

		.jtzw {
			padding: 1em 2em 1em 2em;
			font-size: 1.1em;
			text-indent: 2em;
			line-height: 1.75em;
			margin: 0 auto;
			background-color: #eddbc3;
			border-top-left-radius: 2em 0.5em;
			border-top-right-radius: 1em 3em;
			border-bottom-right-radius: 4em 0.5em;
			border-bottom-left-radius: 1em 3em
		}

		.dz {
			width: 980px;
			margin: 0 auto
		}

		.messCard {
			overflow-y: scroll;
			;
		}

		.H {
			height: 6.95em;
			text-indent: 2em;
		}

		.footerFont {
			font-size: 1em;
			display: flex;
		}

		.divfooterfont {
			padding: 0.5em 10em 0.5em 10em;
			font-size: 1.5em;
			text-align: center;
		}

		.jty {
			float: right;
		}

        .card {
            position: absolute;
            height: 350px;
            width: 100%;
            max-width: 980px;
            margin: auto;
            background-color: #ffffff;
            border-radius: 25px;
            box-shadow: 10px 0 50px rgba(0, 0, 0, 0.5);
        }

        .card .inner_part {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 0 0 30px;
            height: 350px;
            position: absolute;
        }

        .inner_part .img {
            height: 260px;
            width: 260px;
            overflow: hidden;
            flex-shrink: 0;
            border-radius: 20px;
        }

        .img img {
            height: 100%;
            width: 100%;
            cursor: pointer;
            opacity: 0;
            transition: .6s;
        }

        #slide_1:checked~.inner_part .img_1,
        #slide_2:checked~.inner_part .img_2,
        #slide_3:checked~.inner_part .img_3,
        #slide_4:checked~.inner_part .img_4,
        #slide_5:checked~.inner_part .img_5,
        #slide_6:checked~.inner_part .img_6,
        #slide_7:checked~.inner_part .img_7,
        #slide_8:checked~.inner_part .img_8,
        #slide_9:checked~.inner_part .img_9 {
            opacity: 1;
            transition-delay: .2s;
        }

        .content {
            padding: 0 20px 0 35px;
            width: 530px;
            margin-left: 50px;
            opacity: 0;
            transition: .6s;
        }

        #slide_1:checked~.inner_part .content_1,
        #slide_2:checked~.inner_part .content_2,
        #slide_3:checked~.inner_part .content_3,
        #slide_4:checked~.inner_part .content_4,
        #slide_5:checked~.inner_part .content_5,
        #slide_6:checked~.inner_part .content_6,
        #slide_7:checked~.inner_part .content_7,
        #slide_8:checked~.inner_part .content_8,
        #slide_9:checked~.inner_part .content_9 {
            opacity: 1;
            margin-left: 0;
            transition-delay: .3s;
        }

        .content .title {
            font-size: 30px;
            font-weight: 700;
            color: #0d0925;
            margin: 0 0 20px 0;
        }

        .content .text {
            font-size: 19px;
            color: #4e4a67;
            margin: 0 auto 30px auto;
            line-height: 1.5em;
            text-align: justify;
        }

        .content button {
            padding: 15px 5px;
            border: none;
            font-size: 16px;
            color: #fff0e6;
            font-weight: 600;
            letter-spacing: 1px;
            border-radius: 50px;
            cursor: pointer;
            outline: none;
            background: #000000;
            float: right;
        }

        .content button:hover {
            background: #cecece;
            color: #000000;
        }

        .slider {
            position: absolute;
            bottom: 25px;
            left: 60%;
            transform: translateX(-50%);
            z-index: 1;
            width: auto;
            height: auto;
        }

        .slider .slide {
            position: relative;
            height: 10px;
            width: 50px;
            background: #d9d9d9;
            border-radius: 5px;
            display: inline-flex;
            margin: 0 3px;
            cursor: pointer;
        }


        .slider .slide:before {
            position: absolute;
            content: '';
            top: 0;
            left: 0;
            height: 100%;
            width: -100%;
            background: #000000;
            border-radius: 10px;
            transform: scaleX(0);
            transition: transform .6s;
            transform-origin: left;
        }

        #slide_1:checked~.slider .slide_1:before,
        #slide_2:checked~.slider .slide_2:before,
        #slide_3:checked~.slider .slide_3:before,
        #slide_4:checked~.slider .slide_4:before,
        #slide_5:checked~.slider .slide_5:before,
        #slide_6:checked~.slider .slide_6:before,
        #slide_7:checked~.slider .slide_7:before,
        #slide_8:checked~.slider .slide_8:before,
        #slide_9:checked~.slider .slide_9:before {
            transform: scaleX(1);
            width: 100%;
        }

        input {
            display: none;
        }
	</style>
</head>

<body id="page1">
	<!--==============================header=================================-->
	<header>
		<div class="main">
			<div class="wrapper">
				<h1>
					<a href="index.html">广药大文化站</a><br>
					<strong>18天创造奇迹组</strong>
				</h1>
				<nav>
					<ul class="menu">
						<li><a href="index.html" align="center">
								<div class="Chinese">
									主页
								</div>
								<div class="English">
									Home page
								</div>
							</a>
						</li>
						<li><a href="Cultural activity.html" align="center">
								<div class="Chinese">
									文化活动
								</div>
								<div class="English">
									Cultural activity
								</div>
							</a>
						</li>
						<li><a class="active" href="distinction.html" align="center">
								<div class="Chinese">
									榜样
								</div>
								<div class="English">
									People of distinction
								</div>
							</a>
						</li>
						<li><a href="honor.html" align="center">
								<div class="Chinese">
									学校荣誉
								</div>
								<div class="English">
									School honor
								</div>
							</a>
						</li>
						<li><a href="beauty.html" align="center">
								<div class="Chinese">
									校园美景
								</div>
								<div class="English">
									Campus beauty
								</div>
							</a>
						</li>
					</ul>
				</nav>
			</div>
		</div>
	</header>
	<!--==============================content================================-->
	<section id="content" style="padding-bottom: 350px">
		<div class="main">

			<div class="border-bot1 img-indent-bot">
				<h2></h2> <!-- 标题 -->
			</div>

			<div class="wrapper1">
				<div class="card">
                    <input type="radio" name="select" id="slide_1" checked>
                    <input type="radio" name="select" id="slide_2">
                    <input type="radio" name="select" id="slide_3">
                    <input type="radio" name="select" id="slide_4">
                    <input type="radio" name="select" id="slide_5">
                    <input type="radio" name="select" id="slide_6">
                    <input type="radio" name="select" id="slide_7">
                    <input type="radio" name="select" id="slide_8">
                    <input type="radio" name="select" id="slide_9">
                    <input type="checkbox" id="slideImg">
            
                    <div class="inner_part">
                        <label for="slideImg" class="img">
                            <img class="img_1" src="photos2/hzt.jpg">
                        </label>
                        <div class="content content_1">
                            <div class="title">黄卓婷</div>
                            <div class="text">
                                望远山而力行
            
                                她目标明确
            
                                知不足而奋进
            
                                她勇敢坚毅
            
                                她是国家奖学金获得者
                            </div>
            
                        </div>
                    </div>
            
                    <div class="inner_part">
                        <label for="slideImg" class="img">
                            <img class="img_2" src="photos2/hjh2.jpg">
                        </label>
                        <div class="content content_2">
                            <div class="title">黄锦豪</div>
                            <div class="text">
                                因为热爱，所以选择 &nbsp因为选择，所以奋斗<br>
                                他从不放过任何一个提升自我的机会<br>
                                他坚守自己的梦想，赢得了理想的人生
                            </div>
            
                        </div>
                    </div>
            
            
                    <div class="inner_part">
                        <label for="slideImg" class="img">
                            <img class="img_3" src="photos2/cxl.jpg">
                        </label>
                        <div class="content content_3">
                            <div class="title">陈小玲</div>
                            <div class="text">能做事的做事，能发声的发声。<br>
                                有一分热，发一分光，就令萤火一般，也可以在黑暗里发一点光，不必等候炬火。
                            </div>
            
                        </div>
                    </div>
            
            
                    <div class="inner_part">
                        <label for="slideImg" class="img">
                            <img class="img_4" src="photos2/lhj.jpg">
                        </label>
                        <div class="content content_4">
                            <div class="title">廖焊均</div>
                            <div class="text">因为我是一个兵，见红旗就要去扛，见荣誉就要去争！
                            </div>
            
                        </div>
                    </div>
            
                    <div class="inner_part">
                        <label for="slideImg" class="img">
                            <img class="img_5" src="photos2/zpy.jpg">
                        </label>
                        <div class="content content_5">
                            <div class="title">郑派媛</div>
                            <div class="text">她，不忘初心，心怀热情<br>
                                她，奔赴梦想，拒绝躺平<br>
                                她，以奋斗为笔书写青春<br>
                            </div>
            
                        </div>
                    </div>
            
            
                    <div class="inner_part">
                        <label for="slideImg" class="img">
                            <img class="img_6" src="photos2/zyy.jpg">
                        </label>
                        <div class="content content_6">
                            <div class="title">赵宇燕</div>
                            <div class="text">在不断奋斗的路上<br>
                                她不怕困难，挑战自己<br>
                                在不懈探索的征途<br>
                                她逐光而行，厚积薄发<br>
                            </div>
            
                        </div>
                    </div>
            
                    <div class="inner_part">
                        <label for="slideImg" class="img">
                            <img class="img_7" src="photos2/xyq.jpg">
                        </label>
                        <div class="content content_7">
                            <div class="title">谢泳琪</div>
                            <div class="text">学如登山，路长且窄<br>
                                她脚踏实地<br>
                                学如行舟，不进则退<br>
                                她笃行不怠
                            </div>
            
                        </div>
                    </div>
            
                    <div class="inner_part">
                        <label for="slideImg" class="img">
                            <img class="img_8" src="photos2/hjy.jpg">
                        </label>
                        <div class="content content_8">
                            <div class="title">黄金滢</div>
                            <div class="text">创新创业的梦想<br>
                                志愿奉献的激情<br>
                                思想引领的责任感<br>
                                汇成了他的整个青春<br>
                                用梦想点燃激情，为责任永不放弃。
                            </div>
            
                        </div>
                    </div>
            
                    <div class="inner_part">
                        <label for="slideImg" class="img">
                            <img class="img_9" src="photos2/lzy.jpg">
                        </label>
                        <div class="content content_9">
                            <div class="title">李卓谕</div>
                            <div class="text">不忘初心，不移其志<br>
                                满怀热情，信念如炬<br>
                                勇往直前，无所畏惧
                            </div>
                            <!-- <form method="get" action="distinction.html">
                                <button>Read More</button>
                            </form> -->
                        </div>
                    </div>

                    <div class="slider">
                        <label for="slide_1" class="slide slide_1"></label>
                        <label for="slide_2" class="slide slide_2"></label>
                        <label for="slide_3" class="slide slide_3"></label>
                        <label for="slide_4" class="slide slide_4"></label>
                        <label for="slide_5" class="slide slide_5"></label>
                        <label for="slide_6" class="slide slide_6"></label>
                        <label for="slide_7" class="slide slide_7"></label>
                        <label for="slide_8" class="slide slide_8"></label>
                        <label for="slide_9" class="slide slide_9"></label>
                    </div>
            
                </div>

				<article class="col-3">
					<div class="indent-top">

					</div>
				</article>
			</div>
		</div>
	</section>
	<!--==============================详细信息================================-->
	<section id="content">
		<div class="main">
			<div class="indent-left">
				<h3>详细信息</h3>
				<div class="wrapper margin-bot">
					<article class="col-1">
						<div class="prev-indent-bot">
							<figure class="img-border"><a href="https://mp.weixin.qq.com/s/Sf3E1RoDYVLgX9CTWL0dAA"
									target="_blank"><img src="photos/hzt.jpg" alt="" /></a>
							</figure>
							<div class="clear"></div>
						</div>
						<h6>黄卓婷</h6>
						<p class="p2">望远山而力行</p>
						<a class="button" href="https://mp.weixin.qq.com/s/Sf3E1RoDYVLgX9CTWL0dAA" target="_blank">Read
							More</a>
					</article>
					<article class="col-1">
						<div class="prev-indent-bot">
							<figure class="img-border"><a
									href="https://mp.weixin.qq.com/s?__biz=MzIzNTA4MDk3NA==&mid=2651535389&idx=1&sn=b24af96aba4f8da08d310f3bd274f5a9&chksm=f313047cc4648d6af7e0a35e17c5f7506fb1cd50e22ec895102c2f48cc7c60f52671202e3061#rd"
									target="_blank"><img src="photos/hjhh.jpg" alt="" /></a>
							</figure>
							</figure>
							<div class="clear"></div>
						</div>
						<h6>黄锦豪</h6>
						<p class="p2">自助者天助</p>
						<a class="button"
							href="https://mp.weixin.qq.com/s?__biz=MzIzNTA4MDk3NA==&mid=2651535389&idx=1&sn=b24af96aba4f8da08d310f3bd274f5a9&chksm=f313047cc4648d6af7e0a35e17c5f7506fb1cd50e22ec895102c2f48cc7c60f52671202e3061#rd"
							target="_blank">Read
							More</a>
					</article>
					<article class="col-2">
						<div class="prev-indent-bot">
							<figure class="img-border"><a
									href="https://mp.weixin.qq.com/s?__biz=MzIzNTA4MDk3NA==&mid=2651529084&idx=1&sn=de1298487162d627db714db6e8af2ed9&chksm=f313231dc464aa0b2c912af4ff5fbb7089f5275771d05b7cd817941cca61481b65ba9e9c4ffa#rd"
									target="_blank"><img src="photos/cxl.jpg" alt="" /></a>
							</figure>
							<div class="clear"></div>
						</div>
						<h6>陈小玲</h6>
						<p class="p2">志愿西部 青春无悔</p>
						<a class="button"
							href="https://mp.weixin.qq.com/s?__biz=MzIzNTA4MDk3NA==&mid=2651529084&idx=1&sn=de1298487162d627db714db6e8af2ed9&chksm=f313231dc464aa0b2c912af4ff5fbb7089f5275771d05b7cd817941cca61481b65ba9e9c4ffa#rd"
							target="_blank">Read More</a>
					</article>
				</div>
				<div class="wrapper margin-bot">
					<article class="col-1">
						<div class="prev-indent-bot">
							<figure class="img-border"><a
									href="https://mp.weixin.qq.com/s?__biz=MzIzNTA4MDk3NA==&mid=2651520294&idx=1&sn=3a39525d5e3ca20c92c09c20a7c27940&chksm=f312c147c46548512f7d2649acb6d98a7e8b3e966e2b21fcbb00f62539a96a36c09d55218e20#rd"
									target="_blank "><img src="photos/lhj.jpg" alt="" /></a>

							</figure>
							<div class="clear"></div>
						</div>
						<h6>廖焊均</h6>
						<p class="p2">“我是一个兵”</p>
						<a class="button"
							href="https://mp.weixin.qq.com/s?__biz=MzIzNTA4MDk3NA==&mid=2651520294&idx=1&sn=3a39525d5e3ca20c92c09c20a7c27940&chksm=f312c147c46548512f7d2649acb6d98a7e8b3e966e2b21fcbb00f62539a96a36c09d55218e20#rd"
							target="_blank">Read More</a>
					</article>
					<article class="col-1">
						<div class="prev-indent-bot">
							<figure class="img-border"><a href="#" target="_blank"><img src="photos/zpy.jpg"
										alt="" /></a>
							</figure>
							<div class="clear"></div>
						</div>
						<h6>郑派媛</h6>
						<p class="p2">“宝剑锋从磨砺出，梅花香自苦寒来”。</p>
						<a class="button" href="http://mp.weixin.qq.com/s?__biz=MzIzNTA4MDk3NA==&mid=2651536404&idx=1&sn=0850ed09fcf9ea0e8def660ad826e8c3&chksm=f3130075c4648963caf2374f15defe6083868e071ffb3f781faa79909ac54599cbcf25c10eae#rd"target="_blank">Read More</a>
					</article>
					<article class="col-2">
						<div class="prev-indent-bot">
							<figure class="img-border"><a href="https://mp.weixin.qq.com/s/-cor9BUyAplJcOCZ3YAf6w"
									target="_blank"><img src="photos/zyy.jpg" alt="" /></a>
							</figure>
							<div class="clear"></div>
						</div>
						<h6>赵宇燕</h6>
						<p class="p2">挑战自我，攀登高峰</p>
						<a class="button" href="https://mp.weixin.qq.com/s/-cor9BUyAplJcOCZ3YAf6w" target="_blank">Read
							More</a>
					</article>
				</div>
				<div class="wrapper margin-bot">
					<article class="col-1">
						<div class="prev-indent-bot">
							<figure class="img-border"><a href="https://mp.weixin.qq.com/s/HB6MYoAaFEco8zKqhduZrA"
									target="_blank"><img src="photos/xyq.jpg" alt="" /></a>
							</figure>
							<div class="clear"></div>
						</div>
						<h6>谢泳琪</h6>
						<p class="p2">今日事，今日毕</p>
						<a class="button" href="https://mp.weixin.qq.com/s/HB6MYoAaFEco8zKqhduZrA" target="_blank">Read
							More</a>
					</article>
					<article class="col-1">
						<div class="prev-indent-bot">
							<figure class="img-border"><a href="https://mp.weixin.qq.com/s/rhI7EemJmxBTAUhgqFU02A"
									target="_blank"><img src="photos/hjy.jpg" alt="" /></a>
							</figure>
							<div class="clear"></div>
						</div>
						<h6>黄金滢</h6>
						<p class="p2">乐于奉献，传播创新理念</p>
						<a class="button" href="https://mp.weixin.qq.com/s/rhI7EemJmxBTAUhgqFU02A" target="_blank">Read
							More</a>
					</article>
					<article class="col-2">
						<div class="prev-indent-bot">
							<figure class="img-border"><a href="https://mp.weixin.qq.com/s/hP-VL_T2KPvtH0eTzL13XQ"
									target="_blank"><img src="photos/lzy.jpg" alt="" /></a>
							</figure>
							<div class="clear"></div>
						</div>
						<h6>李卓谕</h6>
						<p class="p2">不忘初心，勇毅前行</p>
						<a class="button" href="https://mp.weixin.qq.com/s/hP-VL_T2KPvtH0eTzL13XQ" target="_blank">Read
							More</a>
					</article>
				</div>
			</div>
		</div>
	</section>

	<section class="ct">
		<div class="dz">
			<h3 style="text-align: center">追随榜样的脚步，守护最初的热爱</h3>
			<div class="jtzw">
				<p style="display: flex;">所追求的远大理想、优良品格化作一个个鲜活具体的形象，从而让人们拥有一个学习、模仿的对象。正如罗·阿谢姆所说，
					“一个榜样胜过书上的二十条教诲”，榜样的强大感染力正在于此。每当我们迷失迷失了人生的方向陷入迷茫时，每当我们在
					困境中难以前行，不妨想一想那些杰出的榜样，从他们身上汲取前进的力量。若能在学习榜样过程中鼓足干劲、不断拼搏、
					努力奋斗，定能创造出属于自己的灿烂人生。</p>
				<p style="display: flex;">当一个人的思想还没有强大到自己能完全把握自己的时候，就需要在精神上依托另一个比自己更强的人<br>
					--路遥《平凡的世界》</p>
				<p style="display: flex;"> 青年的思想愈被范例的力量所激励，就愈发发出强烈的光辉<br>
					--法捷耶夫
				</p>
			</div>
		</div>
	</section>
	<!--==============================footer=================================-->
	<footer>
		<div class="main">
			<div class="wrapper border-bot2 margin-bot">
				<article class="fcol-1">
					<div class="indent-left" style="color:#494944">
						<h3 class="color-1">制作人员author</h3>
						<ul class="list-services">
							<li>爱打乒乓球的组长陈某林</li>
							<li class="it-2">老板lzsr</li>
							<li class="it-3">技术指导：小楷同学</li>
							<li class="last-item it-4">早八起来看教程的小雪</li>
						</ul>
					</div>
				</article>
				<article class="fcol-2" style="color:#494944">
					<h3 class="color-11">精神榜样Role Model</h3>
					<p class="p3">
						<img src="photos/lf11.jpg">
					</p>
					<a class="button3" href="https://mp.weixin.qq.com/s/D8vGAcaDZ-E4A7p5wfoo5w" target="_blank">Read
						More</a>
				</article>
				<article class="fcol-3">
					<h3 class="color-1">更多相关链接Links</h3>
					<ul class="list-3">
						<li><a href="https://mp.weixin.qq.com/s/D8GyNMN6haMphtJ3_ySJCA" target="_blank"
								style="color:#494944">闪亮的日子，青春该有的模样</a>
						</li>
						<li><a href="https://mp.weixin.qq.com/s/48PIcbE4Gvu3v0CVdlTm-Q" target="_blank"
								style="color:#494944">不忘初心，奋斗的青春最美丽</a>

						</li>
						<li><a href="https://mp.weixin.qq.com/s/FL726imx9yIvd8MSivmOsA" target="_blank"
								style="color:#494944">广药大2021届优秀本科毕业生标兵光荣榜</a>
						</li>
						<li class="last-item"><a href="https://mp.weixin.qq.com/s/JBSRVlIvRLH_NhFIjMu2Rw"
								target="_blank" style="color:#494944">广药大44名本科生获国家奖学金</a>
						</li>
					</ul>
				</article>
			</div>
		</div>
	</footer>

	<script type="text/javascript"> Cufon.now(); </script>
	<script type="text/javascript">
		$(window).load(function () {
			$('.slider')._TMS({
				duration: 800,
				easing: 'easeOutQuart',
				preset: 'diagonalExpand',
				slideshow: 7000,
				pagNums: false,
				pagination: '.pagination',
				banners: 'fade',
				pauseOnHover: true,
				waitBannerAnimation: true
			});
		});
	</script>
</body>

</html>